<template>
   <div >
      <div class="name">全局搜索</div>
      <div class="inputBox flex"  >
         <input type="text" v-model="keyword_" placeholder="请输入关键字" maxlength="30" @keyup.enter="search_" @input="filterTitle($event.target)" >
         <i class="el-icon-search" @click="search_"></i>
      </div>
      <div></div>
   </div>
</template>
<script>
import common from '@/common/global'
import { mapState,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
         ...mapState('Search',['keyword'])
     },
     data() {
      return {
         keyword_:'',
      }
     },
     watch:{
       keyword:{
            immediate:true,
            handler(newValue,oldValue){
     
               if(newValue !=this.keyword_)
               {
                  this.keyword_ = newValue
                  this.search_()
               }
            }
       }
     },

     methods: {  
      ...mapMutations('Search',['SETKEYWORD']), //设置关键字

       filterTitle(e) { // 搜索内容改变触发
		 	     this.keyword_ = e.value.trimLeft()
              this.keyword_ = common.filterSensitiveInfo(this.keyword_)
              
	    	},
         //搜索
         search_(){
            this.SETKEYWORD(this.keyword_)
            this.$bus.$emit('SearchDetail')
         }
     },
  }
</script>
<style scoped lang='less'>
 /* 平板或手机 */
 @media screen and (max-width: 400px){

   div.name{
     width: 0;
     height: 0;
     overflow: hidden;
   }
 }
.inputBox{
   width: 350px;
   max-width: 90vw;
   background: white;
   border-radius: 10px;
   padding: 5px 5px;
   position: relative;
   transition-duration: 0.3s;

   input{
      width: calc(100% - 50px);
      margin-right: 5px;
   }
   i{
     position: absolute;
     right: 10px;
   }
}
.name{
   color: white;
   font-size: 18px;
}
</style>